<template>
    <div ref="mychart" :style="{
        height,
        width,
    }"></div>
</template>

<script>
export default {
    name: 'Ring',
    props: ['data', 'total', 'type', 'width', 'height', 'notitle'],
    data() {
        return {
            myChart: null,
        }
    },
    methods: {
        optionfn() {
            const value = parseInt(this.data * 100 / this.total)
            return {
                title: {
                    text: `${this.data}/${this.total}`,
                    x: "center",
                    y: "40%",
                    textStyle: {
                        fontWeight: "normal",
                        color: this.type === 'white' ? '#fff': "#0580f2",
                        fontSize: "14",
                    },
                    show: this.notitle ? false : true
                },
                color: this.type === 'white' ? ['#ccc'] : ["rgba(176, 212, 251, 1)"],
                series: [
                    {
                        name: "Line 1",
                        type: "pie",
                        clockWise: true,
                        radius: ["60%", "90%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: value,
                                name: "01",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            // 完成的圆环的颜色
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: this.type === 'white' ? '#fff': "#00cefc", // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: this.type === 'white' ? '#fff': "#367bec", // 100% 处的颜色
                                                },
                                            ],
                                        },
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                    },
                                },
                            },
                            {
                                name: "02",
                                value: 100 - value,
                            },
                        ],
                    },
                ],
            }
        }
    },
    mounted() {
        this.myChart = this.$echarts.init(this.$refs.mychart);
        this.myChart.setOption(this.optionfn());
        window.addEventListener('resize', () => {
            this.myChart.resize()
        })
    },
    watch: {
        data() {
            console.log(this.data, 'fsdfsdf')
            // 每当datas变化时重新绘制一遍echrts
            this.myChart.setOption(this.optionfn());
        },
        type() {
            this.myChart.setOption(this.optionfn()); 
        }
    }
}
</script>